const helper_url = window.location.protocol + "//" + window.location.host + "/helper";

var main_latitude;
var main_longitude;

var api_url;
var x_now, y_now
var zoom = 8;

var step_zoom = 1;
var step_x, step_y;




var start = async function(latitude, longitude) {
    main_latitude = latitude;
    main_longitude = longitude;
    await request_set_helper();

    await request_set_pixels();
    
    console.log(x_now, y_now);
    await show_map();
    // alert(["api_url", api_url]);
}


async function show_map(){
    let link_map = `https://tile.openstreetmap.de/${zoom}/${x_now}/${y_now}.png`;
    document.getElementById("img").src = link_map;
    
}


async function request_set_helper() {
    const response = await fetch(helper_url);
    const data = await response.json();
    api_url = data.backend_url;
}

async function request_set_pixels() {
    var pixels_json = "http://"+api_url+"/pixels?latitude="+main_latitude+"&longitude="+main_longitude+"&zoom="+zoom;
    const response = await fetch(pixels_json);
    const data = await response.json();
    console.log("data: ", data)
    x_now = data.x;
    y_now = data.y;
}




async function size_up(){
    zoom += 1;
    if (zoom > 24){
        zoom = 24;
    }
    await request_set_pixels();
    await show_map();
}
async function size_down(){
    zoom -= 1;
    if (zoom <= 0){
        zoom = 1;
    }
    await request_set_pixels();
    await show_map();
}

async function go_up(){
    y_now -= 1;
    await show_map();
}
async function go_down(){
    y_now += 1;
    await show_map();
}

async function go_left(){
    x_now -= 1;
    await show_map();
}
async function go_right(){
    x_now += 1;
    await show_map();
}